<template>
	<view :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<hx-navbar title="设置交易密码" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="content">
			<view class="item">
				<image class="icon" src="/static/user/pass_icon1.png" mode="scaleToFill"></image>
				<input type="number" style="flex: 1;text-align: left" :password="oldPassword" :maxlength="6" placeholder='请输入6位数字密码'
					v-model="pass" class="value" placeholderStyle="font-size:32rpx;color:#333" />
				<image @click.stop="oldPassword=!oldPassword" class="eye-img"
					:src="oldPassword?'/static/user/eye.png':'/static/user/on-eye.png'" mode="aspectFill"></image>
			</view>
			<view class="item item2">
				<image class="icon2" src="/static/user/pass_icon2.png" mode="scaleToFill"></image>
				<input type="text" style="flex: 1;text-align: left" v-model="imageCaptcha" class="value"
					placeholderStyle="font-size:32rpx;color:#333" placeholder="请输入图形验证码" />
				<view style="display: flex;justify-content: center; align-items: center;" @click="refreshImageCaptcha()" >
					<img :src="imageCaptchaUrl"/>
				</view>
			</view>
			<view class="item item2">
				<image class="icon2" src="/static/user/pass_icon2.png" mode="scaleToFill"></image>
				<input type="text" style="flex: 1;text-align: left" v-model="code" class="value"
					placeholderStyle="font-size:32rpx;color:#333" placeholder="请输入验证码" />
				<view class="get_code"  :style="{color:kselectColorSize}" @click="sendCode()" v-if="verification">
					<text>获取验证码</text>
				</view>
				<view class="get_codeing" v-else>
					<text>{{ timer }} 秒后重新获取</text>
				</view>
			</view>
		</view>
		
		<view class="container" v-if="false">
			<view class="settings_item">
				<view class="value font-blod">
					{{mobile}}
				</view>
			</view>
			<view class="settings_item">
				<!-- <view class="settings_name">
					验证码
				</view> -->
				<input type="text" style="flex: 1;text-align: left" v-model="code" class="value"
					placeholder-style="color:#9B9CA0" placeholder="请输入验证码" />
				<view class="get_code" @click="sliderVerifyFLag=true" v-if="verification">
					<!-- <image src="/static/index/tab_btn_img_on.png" mode="scaleToFill" class="tab_btn_img"></image> -->
					<text>获取验证码</text>
				</view>
				<view class="get_codeing" v-else>
					<!-- <image src="/static/index/tab_btn_img.png" mode="scaleToFill" class="tab_btn_img"></image> -->
					<text>{{ timer }} 秒后重新获取</text>
				</view>
			</view>
			<view class="settings_item">
				<!-- <view class="settings_name">
					支付密码
				</view> -->
				<input type="number" value="" :password="oldPassword" :maxlength="6" placeholder='请输入支付密码'
					v-model="pass" class="value" placeholder-style="color:#9B9CA0" />
				<!-- 	<image @click.stop="oldPassword=!oldPassword" class="eye-img"
					:src="oldPassword?'/static/user/eye.png':'/static/user/on-eye.png'" mode="aspectFill"></image> -->
			</view>
			<view class="settings_item">

				<input type="number" value="" :password="oldPassword" :maxlength="6" placeholder='请确认支付新密码'
					v-model="on_pass" class="value" placeholder-style="color:#9B9CA0" />

			</view>
			<view class="color-red fsz24 m-t-10 p-b-20">
				*请输入6位数字密码
			</view>
		</view>
		<view class="submit" @click="submitHandler()"  :style="[{background:kbuttonBgColor}]">立即提交</view> 
		<!--<slider-verify :isShow="sliderVerifyFLag" @touchSliderResultSuccess="verifyResult"
			@touchSliderResult="verifyResult" ref="verifyElement"></slider-verify> -->
	</view>
</template>

<script>
	import {apiBaseUrl} from '@/config/config.js'
	export default {
		data() {
			return {
				imageCaptchaUrl: '',
				imageCaptchaKey: '',
				imageCaptcha: '',
				newPwd: '',
				rePwd: '',
				sex: 0,
				submitStatus: false,
				oldPassword: true,
				mobile: '',
				code: '',
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s

				pass: '',
				on_pass: '',

				sliderVerifyFLag: false,
			}
		},
		computed: {

		},
		methods: {
			refreshImageCaptcha() {
				this.$api.getImageCaptcha({
					type: 202
				}, res => {
					this.imageCaptchaKey = res.data.key;
					this.imageCaptchaUrl = res.data.base64;
				})
				// this.imageCaptchaKey = Math.random();
				// this.imageCaptchaUrl = apiBaseUrl + '/passport/captcha/image?type=202&key=' + this.imageCaptchaKey;
			},
			// 滑块验证结果回调函数
			verifyResult(res) {
				this.sliderVerifyFLag = false
				if (res) {
					this.sendCode()
				} else {

				}

			},




			// 保存资料
			submitHandler() {
				// if (this.on_pass == '') {
				// 	this.$common.errorToShow('请再次输入密码！')
				// 	return
				// }
				// if (this.on_pass != this.pass) {
				// 	this.$common.errorToShow('两次密码输入不一致！')
				// 	return
				// }
				if (!this.pass) {
					this.$common.errorToShow('请输入密码！')
					return
				}
				if (!this.code) {
					this.$common.errorToShow('请输入验证码！')
					return
				}
				let data = {
					captcha: this.code,
					secondPassword: this.pass
				}
				this.$api.setPayPass(data, res => {
					if (res.status) {
						this.$common.successToShow(res.msg, () => {
							uni.navigateBack({})
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})

			},

			// 发送短信验证码
			sendCode() {
				if(!this.imageCaptcha){
					this.$common.errorToShow("请输入图形验证码");
					return
				}
				this.$common.loadToShow('发送中...');
				setTimeout(() => {
					this.$common.loadToHide();
					this.$api.sms({
						type: 202,
						imageCaptchaKey: this.imageCaptchaKey,
						imageCaptcha: this.imageCaptcha
					}, res => {
						if (res.status) {
							this.timer = 60;
							this.verification = false;
							this.$common.successToShow("发送成功");
							this.countDown(); // 执行验证码计时
						} else {
							this.refreshImageCaptcha()
							this.$common.errorToShow(res.message);
						}
					});
				}, 1000);
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
		},
		onLoad: function() {
			this.refreshImageCaptcha();
			let _this = this;
			_this.timer = parseInt(_this.$db.get('timer'));
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown();
				_this.verification = false;
			}
			// _this.$api.userInfo({}, function(res) {
			// 	if (res.status) {
			// 		_this.mobile = res.data.mobile;
			// 	} else {
			// 		//报错了
			// 		_this.$common.errorToShow(res.msg);
			// 	}
			// });
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		position: relative;
		z-index: 1;
		.item {
			width: 100%;
			height: 120rpx;
			background-color: $bg-box;
			border-radius: 20rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon {
				width: 38.5rpx;
				height: 40rpx;
				display: block;
				margin-right: 21rpx;
			}
			.icon2 {
				width: 28.8rpx;
				height: 36.8rpx;
				display: block;
				margin-right: 26rpx;
			}
			.value {
				font-size: 32rpx;
				color: #000;
			}
			.eye-img {
				width: 23rpx;
				height: 13rpx;
				display: block;
			}
		}
		.item2 {
			padding-left: 39rpx;
		}
		& > view {
			margin-top: 30rpx;
		}
	}
	.submit {
		width: 650rpx;
		height: 80rpx;
		background-color: #FFE4E8;
		border-radius: 45rpx;
		// border: 1px solid #FE005A;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fefefe;
		font-weight: 400;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		z-index: 2;
		transform: translateX(-50%);
	}
</style>